<template>
  <!-- 收藏 -->
  <view class="">
    <view class="collectBox">
      <view class="collection-list">
        <view class="collection-item" @click="goPages('所有收藏')">
          <view class="collection-image-box">
            <image
              class="collection-image"
              src="/static/main/sc.png"
              mode="aspectFill"
            ></image>
          </view>
          <view class="collection-title">默认收藏</view>
        </view>
        <view
          class="collection-item"
          v-for="(item, index) in collectList"
          :key="index"
          @click="goPages(item, index)"
        >
          <view class="collection-image-box">
            <image
              class="collection-image"
              :src="item.folderImgUrl"
              mode="aspectFill"
            ></image>
          </view>
          <view class="collection-title">{{ item.folderTitle }}</view>
        </view>
        <view class="collection-item" @click="goPages('添加收藏夹')">
          <view class="collection-image-box">
            <image
              class="collection-image"
              src="/static/image/addIcon.png"
              mode="aspectFill"
              style="width: 35%; height: 35%"
            ></image>
          </view>
          <view class="collection-title">添加收藏夹</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import commonMixin from "@/mixin/commonMinxin";
import filterUrl from "@/hooks/filterUrl";

export default {
  mixins: [commonMixin],
  props: ["comPage", "urlParams"],
  data() {
    return {
      collectList: [],
      offset: 1,
      queryParams: {},
    };
  },
  watch: {
    comPage(newVal, OldVal) {
      console.log(newVal, "newVal");
      this.offset = newVal;
      this.init();
    },
    // 监听urlParams的变化
    urlParams: {
      handler(newVal) {
        if (newVal) {
          this.queryParams = { ...newVal };
          console.log("collect组件接收到URL参数:", this.queryParams);
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.init();
    // this.handleCollectList();
  },
  methods: {
    goPages(item) {
      console.log(item, "item");
      if (item == "所有收藏") {
        let starFolderId = {
          starFolderId: "",
        };
        this.goPage(starFolderId);
        // uni.navigateTo({
        // 	url: "/pages/my/collectList",
        // });
        return;
      }
      if (item == "添加收藏夹") {
        console.log(this.queryParams);
        const jumpUrl = filterUrl(
          "/pages/my/addCollection",
          "",
          this.queryParams,
        );
        let ddd = {
          hideNavBar: "1",
          hideTotalNavBar: "0",
          hideBottomSafeBar: "0",
          url: jumpUrl,
        };
        console.log(jumpUrl);
        switch (uni.getSystemInfoSync().platform) {
          case "android":
            let d = JSON.stringify(ddd);
            window.AndroidBridge.pushNewWebVC(d);
            console.log("运行Android上");
            break;
          case "ios":
            window.webkit.messageHandlers.backEvent.postMessage(ddd);
            break;
          default:
            console.log("运行在开发者工具上");
            break;
        }
      } else {
        this.goPage(item);
      }
    },
    init() {
      // this.collectList = [];
      uni.app.post(
        "/blog/note/getStarFolder",
        {
          authorId: uni.getStorageSync("userId"),
          limit: 6,
          offset: this.offset,
        },
        "",
        "",
        (res) => {
          this.collectList = this.collectList.concat(res.data.records);
          // let FavoritesList = {
          // 	folderTitle: "新增收藏夹",
          // 	folderImgUrl: "/static/my/addicon.png",
          // };
          // this.collectList.push(FavoritesList);
        },
      );
    },
    goPage(item) {
      let url = `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/my/collectList?starFolderId=${item.starFolderId}&authorId=${uni.getStorageSync("userId")}&token=${uni.getStorageSync("token")}`;
      console.log(url);
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          let ddd = {
            hideNavBar: "1",
            hideTotalNavBar: "0",
            hideBottomSafeBar: "0",
            url,
          };
          let d = JSON.stringify(ddd);
          console.log(d, "都是对的");
          window.AndroidBridge.pushNewWebVC(d);
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.pushNewWebVC.postMessage({
            hideNavBar: "1",
            hideTotalNavBar: "0",
            hideBottomSafeBar: "0",
            url,
          });
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.collectBox {
  width: 92vw;
  margin: 0 auto;
}

.collection-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.collection-item {
  width: 49%;
  /* 两个一行，留出间距 */
  margin-bottom: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  .collection-image-box {
    background-color: #fff;
    border-radius: 16rpx;
    width: 100%;
    height: 338rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .collection-image {
      width: 50%;
      height: 50%;
    }
  }
}

.collection-title {
  font-weight: 500;
  margin-top: 16rpx;
  width: 100%;
  font-size: 28rpx;
  color: #303030;
  text-align: left;
}
</style>
